<template>
  <div class="dissertation">
    <h3>专题精选</h3>
    <van-swipe :loop="false" :show-indicators="false" :width="300">
      <van-swipe-item v-for="item in godissertation" :key="item.id" class="ddd">
        <img :src="item.item_pic_url" alt />
        <ul>
          <li>
            <span>{{item.title}}</span>
            <span>{{item.price_info | componentFilter}}</span>
          </li>
          <li>{{item.subtitle}}</li>
        </ul>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["godissertation"]
};
</script>

<style lang="less" scoped>
.dissertation {
  margin-top: 10px;
  padding: 0 10px;
  border-bottom: 10px solid #f4f4f4;
  background-color: #fff;
  h3 {
    padding: 10px;
    font-weight: normal;
    text-align: center;
  }
  .ddd {
    box-sizing: border-box;
    padding-right: 10px;
  }
  .ddd:nth-last-of-type(1) {
    padding-right: 0;
  }
  img {
    height: 166.66px;
    width: 100%;
  }
  ul {
    width: 100%;
  }
  li:nth-of-type(1) {
    span:nth-of-type(2) {
      color: red;
      margin-left: 10px;
    }
  }
  li:nth-of-type(2) {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 1; //显示的行
  }
}
</style>